<template>

	<view class="modal" v-if="showVideo">
		<video class="video" :src="help.data.link" :paused="isPaused" @play="startCountdown"
			@loadedmetadata="getVideoDuration" :autoplay="autoplay" :controls="false"></video>
		<view class="countdown" :style="videoStyle">剩余观看时间<text>{{ countdown }}</text></view>
		<view v-if="(this.help.data.is_limit == 0)||overVideo" class="close" @click="closeModal">
			<text class="iconfont icon-guanbixiao"></text>
		</view>
	</view>

</template>

<script>
	export default {
		props: ["showVideo", "help"],
		data() {
			return {
				autoplay: false,
				overVideo: false,
				isPaused: false,
				countdownStyle: {},
				//videoSrc: "https://draw.rxkjcn.com/upload/video/20230818/video.mp4",
				videoSrc: "",
				show: false, // 控制视频弹窗的显示和隐藏
				videoStyle: {}, // 视频元素的样式
				countdown: 0, // 倒计时数字
				duration: 0, // 视频的时长，单位为秒
				countdownTimer: null, // 倒计时定时器
				closeTimer: null // 关闭定时器
			}
		},
		mounted() {
			console.log("mounted");
			console.log(this.help.data.is_limit)
			console.log(this.overVideo)
			this.autoplay = true;
		},
		computed: {
			closeDisplay: function() {
				if (this.help.data.is_limit != 1) {
					return true
				} else {
					return this.overVideo
				}
			}
		},
		methods: {

			closeModal() {
				this.overVideo = false;
				uni.$store.state.showNav = true;
				var _this = this;
				this.isPaused = true;
				_this.stopCountdown();
				_this.$emit("changShow", false)




			},
			getVideoDuration(e) {
				uni.$store.state.showNav = false;
				const {
					width,
					height,
					duration
				} = e.target;
				this.duration = duration;
				const screenWidth = uni.getSystemInfoSync().windowWidth;
				const screenHeight = uni.getSystemInfoSync().windowHeight;
				const scale = Math.min(screenWidth / width, screenHeight / height);
				const videoWidth = width * scale;
				const videoHeight = height * scale;
				const videoLeft = (screenWidth - videoWidth) / 2;
				const videoTop = (screenHeight - videoHeight) / 2;
				this.videoStyle = {
					width: `${videoWidth}px`,
					height: `${videoHeight}px`,
					left: `${videoLeft}px`,
					top: `${videoTop}px`
				};
				this.countdownStyle = {
					left: `${videoLeft}px`,
					top: `${videoTop}px`
				}
			},
			startCountdown() {
				//this.countdown = this.duration;
				this.countdown = this.help.data.time;
				this.countdownTimer = setInterval(() => {
					this.countdown--;
					if (this.countdown === 0) {
						this.stopCountdown();

						//播放完毕
					}
				}, 1000);
				//this.startCloseTimer();
			},
			stopCountdown() {
				this.overVideo = true;
				clearInterval(this.countdownTimer);
				this.countdownTimer = null;
			},
			stopCloseTimer() {
				clearTimeout(this.closeTimer);
				this.closeTimer = null;
			},
			startCloseTimer() {
				this.closeTimer = setTimeout(() => {
					this.closeModal();
				}, this.duration * 1000);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.modal {
		width: 100vw;
		height: 100vh;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999999;
	}

	.video {

		object-fit: contain;
	}

	.countdown {
		position: absolute;
		top: 550rpx;
		left: 30rpx;
		color: #000;
		z-index: 101;
		font-size: 16px;

		text {
			color: #f00;
			margin: 0 5rpx;
		}
	}

	.close {
		position: absolute;
		width: 100rpx;
		height: 100rpx;
		top: 520rpx;
		right: 30rpx;
		line-height: 100rpx;
		color: #fff;
		z-index: 102;
		font-size: 16px;
		cursor: pointer;

		.iconfont {
			color: #333;
			font-size: 50rpx;
		}
	}
</style>